<template>
    <div id="container">
        <div id="title">
            <h1>电商后台管理系统——注册</h1>
        </div>
        <div class="input">
            <el-input v-model="name" prefix-icon="el-icon-user" placeholder="请输入用户名"></el-input>
        </div>
        <div class="input">
            <el-input v-model="password" prefix-icon="el-icon-lock" placeholder="请输入密码" show-password></el-input>
        </div>
        <div class="input">
            <el-button @click="register" style="width:500px" type="primary" :disabled="disabled">提交注册申请</el-button>
        </div>
    </div>
</template>


<script>
import Storage from '../../tools/Storage'
import {ElMessage} from 'element-plus'
import axios from 'axios'


export default{
    data(){
        return{
            name:"",
            password:""
        }
    },  
    computed:{
        disabled(){
            return this.name.length==0 || this.password.length==0;
        }
    },
    methods:{
        register(){
            let baseURL='http://localhost:8888';
           
            axios.post(baseURL+'/user/register', {
                aname: this.name,
                apwd: this.password
            })
            .then(successResponse => {
                if (successResponse.data === "existed") {
                    ElMessage({
                        message:'用户名已存在！',
                        type:'error',
                        duration:3000
                    });
                    this.isDisable = false
                }else{
                    ElMessage({
                        message:'注册成功！',
                        type:'success',
                        duration:3000
                    });
                    this.$router.replace({path: '/login'})
                }
            })
            .catch(failResponse => {
                ElMessage({
                    message:'响应异常',
                    type:'error',
                    duration:3000
                });
            })

        }


    }
}
</script>